/**
 *@auther: tang
 *@Date: 2020-11-17
 *Project: group-booking-shop-manage-system
 */
import React from "react"
import {Button, Form, Input, message, Modal, Select, Switch, Table, Tooltip, Upload} from 'antd';
import * as Icon from "@ant-design/icons"
import {inject, Observer} from "mobx-react"
import Req from "../../../api"

const { Column} = Table;

@inject("userStore","permissStore")
@Observer
class DeliverySettings extends React.Component {
    constructor(props) {
        super(props);
        this.formRef = React.createRef();
        this.state = {
            dataIsLoading:true,
            tableData:[],
            modalVisable:false,
            confirmLoading:false,
            add:false,
            modalTit:"",
            initFormVals:{}
        }
    }
    componentWillMount() {
        this.getTableData()
    }
    getTableData(){
        //    这里请求
        Req.deliveryList({}).then(res=>{
            console.log(res);
            res.forEach((item)=>{
                item.loading=false
            })
            this.setState({
                dataIsLoading:false,
                confirmLoading:false,
                tableData:res
            })
        }).catch(err=>{
            console.log(err)
        })
    }
    addItem(){
        //    添加一个条目
        this.openModal(0);
    }
    onPageChange(page,limit){
        //    分页按钮点击
    }
    handleModalOk(){
        //    处理点击模态框确定
        this.setState({
            confirmLoading:true
        },()=>{
            this.formRef.current.validateFields().then(formData=>{
                //    发送axios请求
                if (this.state.add){
                    //添加
                    Req.menuManagerList({}).then(res=>{
                        console.log(res);
                        this.setState({
                            confirmLoading:false,
                            modalVisable:false
                        });
                        message.success("添加成功");
                        this.getTableData();
                    }).catch(err=>{
                        console.log(err);
                        message.error("服务器开小差了")
                    })
                }else{
                    //    修改
                    Req.menuManagerList({}).then(res=>{
                        console.log(res);
                        this.setState({
                            confirmLoading:false,
                            modalVisable:false
                        });
                        message.success("修改成功");
                        this.getTableData();
                    }).catch(err=>{
                        console.log(err);
                        message.error("服务器开小差了")
                    })
                }
            }).catch(err=>{

            })

        })
    }
    componentDidUpdate(prevProps, prevState, snapshot) {
        if (this.formRef.current){
            this.formRef.current.resetFields()
        }
    }
    openModal(index,item){
        console.log(index,item)
        this.setState({
            modalVisable:true
        })
        if (this.formRef.current){
            this.formRef.current.resetFields();
        }
        switch (index){
            case 0:
                this.setState({
                    add:true,
                    modalTit:"添加",
                    initFormVals:{}
                })
                break;
            case 1:
                this.setState({
                    add:false,
                    modalTit:"修改",
                    initFormVals:item
                })
                break;
        }

    }
    modalHandleCancel(){
        this.setState({
            modalVisable:false,
            confirmLoading:false
        })
    }
    //开关
    swChangeHandle=  (id)=>{
        console.log(id);
        let data = this.state.tableData;
        data.forEach((item)=>{
            if (item.id===id){
                console.log(item)
                item.loading = true;
            }
        });
        this.setState({
            tableData:data
        },()=>{
            //    请求
            setTimeout(()=>{
                data.forEach((item)=>{
                    if (item.id===id){
                        console.log(item)
                        item.loading = false;
                    }
                });
                this.setState({
                    tableData:data
                })
            },2000)
        })
    }
    //点击不同的按钮触发不同的模态框
    render() {
        let {state} = this;
        // console.log(this.props.tableData)
        return (
            <div>
                {/*顶部操作区域*/}
                <Button onClick={this.addItem.bind(this)}>添加</Button>
                <Table dataSource={this.state.tableData} loading={{
                    tip:"数据请求中",
                    spinning:state.dataIsLoading
                }} sticky={true} pagination={{
                    defaultCurrent:1,total:state.tableData.length,onChange:this.onPageChange.bind(this)
                }}  rowKey={record=>record.id}>
                    <Column title="ID" dataIndex="id" key="id" />
                    <Column title="名称" dataIndex="name" key="id" />
                    <Column title="值" dataIndex="value" key="id" />
                    <Column title="启用" dataIndex="state" key="id" render={(text,record,index)=>{
                        return <Switch
                            checkedChildren={<Icon.CheckOutlined />}
                            unCheckedChildren={<Icon.CloseOutlined />}
                            defaultChecked={Boolean(record.state)}
                            loading={state.tableData.find(item=>item.id===record.id).loading}
                            onChange={this.swChangeHandle.bind(this,record.id)}
                        />
                    }}>

                    </Column>
                    <Column title="操作"  key="id" render ={ (text,record,index)=>{
                        return <div className="tableAction">
                            <Tooltip title="修改">
                                <Button shape="circle" icon={<Icon.EditTwoTone />} onClick={this.openModal.bind(this,1,record)}/>
                            </Tooltip>
                        </div>
                    }}/>
                </Table>
                <Modal
                    title={state.modalTit}
                    visible={state.modalVisable}
                    onOk={this.handleModalOk.bind(this)}
                    confirmLoading={state.confirmLoading}
                    onCancel={this.modalHandleCancel.bind(this)}
                    cancelText="取消"
                    okText="提交"
                    destoryOnClose
                >
                    <Form
                        ref={this.formRef}
                        labelCol={{
                            span: 4,
                        }}
                        wrapperCol={{
                            span: 14,
                        }}
                        layout="horizontal"
                        size="default"
                        initialValues={state.initFormVals}
                    >
                        <Form.Item label="名称" name="name">
                            <Input />
                        </Form.Item>
                        <Form.Item label="值" name="value">
                            <Input/>
                        </Form.Item>
                    </Form>
                </Modal>
            </div>

        )
    }
}

export {DeliverySettings as default}
